@@include('header.htm', {
  "title": "Buttons - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "",

	"select2": "",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "components",
	"sub_parent": "buttons",
	"active": "button-default"
})

@@include('top-bar.htm')




<div class="breadcrumb-wrapper">
	<h1>Button Default</h1>
	
	@@include('breadcrumb.htm', {
		"parent": "components",
		"sub_parent": "components",
		"active": "button-default"
	})
</div>

<ul class="nav nav-tabs nav-style-border mb-5 pl-0" id="myTab" role="tablist">
	<li class="nav-item">
		<a class="nav-link active" id="home-tab" data-toggle="tab" href="#rounded" role="tab" aria-controls="rounded" aria-selected="true">Rounded Buttons</a>
	</li>

	<li class="nav-item">
		<a class="nav-link" id="profile-tab" data-toggle="tab" href="#square" role="tab" aria-controls="square" aria-selected="false">Square Buttons</a>
	</li>

	<li class="nav-item">
		<a class="nav-link" id="contact-tab" data-toggle="tab" href="#pill" role="tab" aria-controls="pill" aria-selected="false">Pill Buttons</a>
	</li>
</ul>

<div class="tab-content" id="myTabContent">
	<div class="tab-pane fade show active" id="rounded" role="tabpanel" aria-labelledby="home-tab">
		<div class="row">
			<div class="col-lg-6">
				<!-- Default Button -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Default Buttons </h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/buttons/" target="_blank"> more details.</a></p>
						<button type="button" class="mb-1 btn btn-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-success">Success</button>
						<button type="button" class="mb-1 btn btn-info">Info</button>
						<button type="button" class="mb-1 btn btn-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Default Outline Button -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Default Outline Buttons </h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For outline button add classes <code>.btn-outline-*</code>. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/buttons/#outline-buttons" target="_blank"> more details.</a></p>
						<button type="button" class="mb-1 btn btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!--Default Icon Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Default Icon Buttons </h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Icon Buttons add <code> &lt;i class="mdi mdi-*"&gt;&lt;/i&gt; </code> inside <code> &lt;button class="btn"&gt; </code>. Get classes for material icon <a href="material-icon.html">here</a>.
						</p>
						<button type="button" class="mb-1 btn btn-primary">
							<i class=" mdi mdi-star-outline mr-1"></i>  Primary</button>
						<button type="button" class="mb-1 btn btn-secondary">
							<i class=" mdi mdi-diamond-outline mr-1"></i> Secondary</button>
						<button type="button" class="mb-1 btn btn-success">
							<i class=" mdi mdi-checkbox-marked-outline mr-1"></i> Success</button>
						<button type="button" class="mb-1 btn btn-info">
							<i class=" mdi mdi-information-outline mr-1"></i> Info</button>
						<button type="button" class="mb-1 btn btn-warning">
							<i class=" mdi mdi-alert-outline mr-1"></i> Warning</button>
						<button type="button" class="mb-1 btn btn-danger">
							<i class=" mdi mdi-close-circle-outline mr-1"></i> Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!--Outline Icon Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Outline Icon Buttons </h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Icon Buttons add <code> &lt;i class="mdi mdi-*"&gt;&lt;/i&gt; </code> inside <code> &lt;button class="btn btn-outline-*"&gt; </code>. Get classes for material icon <a href="material-icon.html">here</a>.
						</p>
						<button type="button" class="mb-1 btn btn-outline-primary">
							<i class=" mdi mdi-star-outline mr-1"></i> Primary</button>
						<button type="button" class="mb-1 btn btn-outline-secondary">
							<i class=" mdi mdi-diamond-outline mr-1"></i> Secondary</button>
						<button type="button" class="mb-1 btn btn-outline-success">
							<i class=" mdi mdi-checkbox-marked-outline mr-1"></i> Success</button>
						<button type="button" class="mb-1 btn btn-outline-info">
							<i class=" mdi mdi-information-outline mr-1"></i> Info</button>
						<button type="button" class="mb-1 btn btn-outline-warning">
							<i class=" mdi mdi-alert-outline mr-1"></i> Warning</button>
						<button type="button" class="mb-1 btn btn-outline-danger">
							<i class=" mdi mdi-close-circle-outline mr-1"></i> Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Large Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Large Buttons</h2>
					</div>
					<div class="card-body">
						<p class="mb-5">Add <code>.btn-lg</code> or for additional sizes. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/buttons/#sizes" target="_blank"> more details. </a></p>
						<button type="button" class="mb-1 btn btn-lg btn-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-lg btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-lg btn-success">Success</button>
						<button type="button" class="mb-1 btn btn-lg btn-info">Info</button>
						<button type="button" class="mb-1 btn btn-lg btn-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-lg btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Large Outline Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Large Outline Buttons</h2>
					</div>
					<div class="card-body">
						<p class="mb-5">Add <code>.btn-lg btn-outline-*</code> or for additional sizes. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/buttons/#outline-buttons" target="_blank"> more details. </a></p>
						<button type="button" class="mb-1 btn btn-lg btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-lg btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-lg btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn btn-lg btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn btn-lg btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-lg btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Small Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Small Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5">Add <code>.btn-sm</code> or for additional sizes. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/buttons/#sizes" target="_blank"> more details. </a></p>
						<button type="button" class="mb-1 btn btn-sm btn-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-sm btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-sm btn-success">Success</button>
						<button type="button" class="mb-1 btn btn-sm btn-info">Info</button>
						<button type="button" class="mb-1 btn btn-sm btn-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-sm btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Small Outline Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Small Outline Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5">Add <code>.btn-sm btn-outline-*</code> or for additional sizes. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/buttons/#outline-buttons" target="_blank"> more details. </a></p>
						<button type="button" class="mb-1 btn btn-sm btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-sm btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-sm btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn btn-sm btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn btn-sm btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-sm btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Disable buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Disable Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5">Make buttons look inactive by adding the <code>disabled</code> boolean attribute to any &lt;button&gt; element. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/buttons/#disabled-state" target="_blank"> more details. </a></p>
						<button type="button" class="mb-1 btn  disabled btn-primary">Primary</button>
						<button type="button" class="mb-1 btn disabled  btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn  disabled btn-success">Success</button>
						<button type="button" class="mb-1 btn  disabled btn-info">Info</button>
						<button type="button" class="mb-1 btn  disabled btn-warning">Warning</button>
						<button type="button" class="mb-1 btn  disabled btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Disable Outline buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Disable Outline Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5">Make buttons look inactive by adding the <code>disabled</code> boolean attribute to any &lt;button&gt;
							element. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/buttons/#disabled-state" target="_blank"> more details.</a></p>
						<button type="button" class="mb-1 btn disabled  btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn disabled  btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn disabled  btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn disabled  btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn disabled  btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn disabled  btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Active buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Active Buttons</h2>
					</div>
					<div class="card-body">
						<p class="mb-5">Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/buttons/#active-state" target="_blank"> more details.</a></p>
						<button type="button" class="mb-1 btn active btn-primary">Primary</button>
						<button type="button" class="mb-1 btn active  btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn active btn-success">Success</button>
						<button type="button" class="mb-1 btn active btn-info">Info</button>
						<button type="button" class="mb-1 btn active btn-warning">Warning</button>
						<button type="button" class="mb-1 btn active btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Active Outline buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Active Outline Buttons</h2>
					</div>
					<div class="card-body">
						<p class="mb-5"> For Active Outline Buttons add class <code> .active </code> to <code> &lt;div class="btn btn-outline-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn active btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn active btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn active btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn active btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn active btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn active btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Block buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Block Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5">Create block level buttons—those that span the full width of a parent—by adding <code> .btn-block </code>. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/buttons/#sizes" target="_blank"> more details. </a></p>
						<button type="button" class="mb-1 btn btn-block btn-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-block  btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-block btn-success">Success</button>
						<button type="button" class="mb-1 btn btn-block btn-info">Info</button>
						<button type="button" class="mb-1 btn btn-block btn-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-block btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Block Outline buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Block Outline Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5">Create block level outline buttons—those that span the full width of a parent—by adding <code>.btn-block .btn-outline-*</code>. Read Bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/buttons/#sizes" target="_blank"> more	details. </a></p>
						<button type="button" class="mb-1 btn btn-block  btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-block  btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-block  btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn btn-block btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn btn-block  btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-block  btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="tab-pane fade" id="square" role="tabpanel" aria-labelledby="profile-tab">
		<div class="row">
			<div class="col-lg-6">
				<!-- Square Button -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Square Buttons</h2>
					</div>
					<div class="card-body">
						<p class="mb-5"> For Square Buttons add class <code> .btn-square </code> to <code> &lt;button class="btn btn-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-square btn-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-square btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-square btn-success">Success</button>
						<button type="button" class="mb-1 btn btn-square btn-info">Info</button>
						<button type="button" class="mb-1 btn btn-square btn-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-square btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Default Outline Button -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Square Outline Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Square Buttons add class <code> .btn-square </code> to <code> &lt;button class="btn btn-outline-primary"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-square btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-square btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-square btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn btn-square btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn btn-square btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-square btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!--Default Icon Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Square Icon Buttons</h2>
					</div>
					
					<div class="card-body">
						<p class="mb-5"> For Square Icon Buttons add <code> &lt;i class="mdi mdi-*"&gt;&lt;/i&gt; </code> inside <code> &lt;button class="btn btn-square btn-*"&gt; </code>. Get classes for material icon <a href="material-icon.html">here</a>.
						</p>
						<button type="button" class="mb-1 btn btn-square btn-primary">
							<i class="mdi mdi-star-outline mr-1"></i> Primary</button>
						<button type="button" class="mb-1 btn btn-square btn-secondary">
							<i class="mdi mdi-diamond-outline mr-1"></i> Secondary</button>
						<button type="button" class="mb-1 btn btn-square btn-success">
							<i class="mdi mdi-checkbox-marked-outline mr-1"></i> Success</button>
						<button type="button" class="mb-1 btn btn-square btn-info">
							<i class="mdi mdi-information-outline mr-1"></i> Info</button>
						<button type="button" class="mb-1 btn btn-square btn-warning">
							<i class="mdi mdi-alert-outline mr-1"></i> Warning</button>
						<button type="button" class="mb-1 btn btn-square btn-danger">
							<i class="mdi mdi-close-circle-outline mr-1"></i> Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!--Outline Icon Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Outline Square Icon Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Outline Square Icon Buttons add <code> &lt;i class="mdi mdi-*"&gt;&lt;/i&gt; </code> inside <code> &lt;button class="btn btn-square btn-outline-*"&gt; </code>. Get classes for material icon <a href="material-icon.html">here</a>.
						</p>
						<button type="button" class="mb-1 btn btn-square btn-outline-primary">
							<i class="mdi mdi-star-outline mr-1"></i></i> Primary</button>
						<button type="button" class="mb-1 btn btn-square btn-outline-secondary">
							<i class="mdi mdi-diamond-outline mr-1"></i> Secondary</button>
						<button type="button" class="mb-1 btn btn-square btn-outline-success">
							<i class="mdi mdi-checkbox-marked-outline mr-1"></i> Success</button>
						<button type="button" class="mb-1 btn btn-square btn-outline-info">
							<i class="mdi mdi-information-outline mr-1"></i> Info</button>
						<button type="button" class="mb-1 btn btn-square btn-outline-warning">
							<i class="mdi mdi-alert-outline mr-1"></i> Warning</button>
						<button type="button" class="mb-1 btn btn-square btn-outline-danger">
							<i class="mdi mdi-close-circle-outline mr-1"></i> Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Large Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Large Square Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Large Square Buttons add class <code> .btn-lg </code> to <code> &lt;button class="btn btn-square btn-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-square btn-lg btn-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-square btn-lg btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-square btn-lg btn-success">Success</button>
						<button type="button" class="mb-1 btn btn-square btn-lg btn-info">Info</button>
						<button type="button" class="mb-1 btn btn-square btn-lg btn-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-square btn-lg btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Large Outline Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Large Outline Square Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Large Outline Square Buttons add class <code> .btn-lg </code> to <code> &lt;button class="btn btn-square btn-outline-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-square btn-lg btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-square btn-lg btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-square btn-lg btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn btn-square btn-lg btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn btn-square btn-lg btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-square btn-lg btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>

			<!-- Small Buttons -->
			<div class="col-lg-6">
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Small Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Small Square Buttons add class <code> .btn-sm </code> to <code> &lt;button class="btn btn-square btn-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-square btn-sm btn-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-square btn-sm btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-square btn-sm btn-success">Success</button>
						<button type="button" class="mb-1 btn btn-square btn-sm btn-info">Info</button>
						<button type="button" class="mb-1 btn btn-square btn-sm btn-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-square btn-sm btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Small Outline Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Small Outline Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Small Outline Square Buttons add class <code> .btn-sm </code> to <code> &lt;button class="btn btn-square btn-outline-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-square btn-sm btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-square btn-sm btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-square btn-sm btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn btn-square btn-sm btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn btn-square btn-sm btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-square btn-sm btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Disable Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Disable Square Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Disable Square Buttons add class <code> .disabled </code> to <code> &lt;button class="btn btn-square btn-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-square disabled btn-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-square disabled btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-square disabled btn-success">Success</button>
						<button type="button" class="mb-1 btn btn-square disabled btn-info">Info</button>
						<button type="button" class="mb-1 btn btn-square disabled btn-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-square disabled btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Disable Outline Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Disable Square Outline Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Disable Outline Square Buttons add class <code> .disabled </code> to <code> &lt;button class="btn btn-square btn-outline-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-square disabled btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-square disabled btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-square disabled btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn btn-square disabled btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn btn-square disabled btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-square disabled btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Active Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Active Buttons</h2>
					</div>
					<div class="card-body">
						<p class="mb-5"> For Active Square Buttons add class <code> .active </code> to <code> &lt;button class="btn btn-square btn-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-square active btn-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-square active btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-square active btn-success">Success</button>
						<button type="button" class="mb-1 btn btn-square active btn-info">Info</button>
						<button type="button" class="mb-1 btn btn-square active btn-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-square active btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Active Outline Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Active Outline Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Active Outline Square Buttons add class <code> .active </code> to <code> &lt;button class="btn btn-square btn-outline-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-square active  btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-square active  btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-square active  btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn btn-square active  btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn btn-square active  btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-square active  btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Block Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Square Block Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Square Block Buttons add class <code> .btn-block </code> to <code> &lt;button class="btn btn-square btn-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-square btn-block btn-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-square btn-block  btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-square btn-block btn-success">Success</button>
						<button type="button" class="mb-1 btn btn-square btn-block btn-info">Info</button>
						<button type="button" class="mb-1 btn btn-square btn-block btn-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-square btn-block btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Block Square Outline Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Block Square Outline Buttons add class <code> .btn-block </code> to <code> &lt;button class="btn btn-square btn-outline-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-square btn-block btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-square btn-block btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-square btn-block btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn btn-square btn-block btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn btn-square btn-block btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-square btn-block btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="tab-pane fade" id="pill" role="tabpanel" aria-labelledby="contact-tab">
		<div class="row">
			<div class="col-lg-6">
				<!-- Block buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Pill Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Pill Buttons add class <code> .btn-pill </code> to <code> &lt;button class="btn btn-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-pill btn-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-pill btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-pill btn-success">Success</button>
						<button type="button" class="mb-1 btn btn-pill btn-info">Info</button>
						<button type="button" class="mb-1 btn btn-pill btn-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-pill btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Default Outline buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Pill Outline Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Pill Buttons add class <code> .btn-pill </code> to <code> &lt;button class="btn btn-outline-primary"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-pill btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-pill btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-pill btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn btn-pill btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn btn-pill btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-pill btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!--Default Icon Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Pill Icon Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Pill Square Icon Buttons add <code> &lt;i class="mdi mdi-*"&gt;&lt;/i&gt; </code> inside <code> &lt;button class="btn btn-pill"&gt; </code>. Get classes for material icon <a href="material-icon.html">here</a>.
						</p>
						<button type="button" class="mb-1 btn btn-pill btn-primary">
							<i class="mr-1 fa fa-star-o"></i> Primary</button>
						<button type="button" class="mb-1 btn btn-pill btn-secondary">
							<i class="mr-1 fa fa-diamond"></i> Secondary</button>
						<button type="button" class="mb-1 btn btn-pill btn-success">
							<i class="mr-1 fa fa-check-square-o"></i> Success</button>
						<button type="button" class="mb-1 btn btn-pill btn-info">
							<i class="mr-1 fa fa-info-circle"></i> Info</button>
						<button type="button" class="mb-1 btn btn-pill btn-warning">
							<i class="mr-1 fa fa-warning"></i> Warning</button>
						<button type="button" class="mb-1 btn btn-pill btn-danger">
							<i class="mr-1 fa fa-ban"></i> Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!--Outline Icon Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Pill Outline Icon Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Pill Square Icon Buttons add <code> &lt;i class="mdi mdi-*"&gt;&lt;/i&gt; </code> inside <code> &lt;button class="btn btn-pill btn-outline-*"&gt; </code>. Get classes for material icon <a href="material-icon.html">here</a>.
						</p>
						<button type="button" class="mb-1 btn btn-pill btn-outline-primary">
							<i class="mr-1 fa fa-star-o"></i> Primary</button>
						<button type="button" class="mb-1 btn btn-pill btn-outline-secondary">
							<i class="mr-1 fa fa-diamond"></i> Secondary</button>
						<button type="button" class="mb-1 btn btn-pill btn-outline-success">
							<i class="mr-1 fa fa-check-square-o"></i> Success</button>
						<button type="button" class="mb-1 btn btn-pill btn-outline-info">
							<i class="mr-1 fa fa-info-circle"></i> Info</button>
						<button type="button" class="mb-1 btn btn-pill btn-outline-warning">
							<i class="mr-1 fa fa-warning"></i> Warning</button>
						<button type="button" class="mb-1 btn btn-pill btn-outline-danger">
							<i class="mr-1 fa fa-ban"></i> Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Large Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Large Pill Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Large Pill Buttons add class <code> .btn-lg </code> to <code> &lt;button class="btn btn-pill btn-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-pill btn-lg btn-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-pill btn-lg btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-pill btn-lg btn-success">Success</button>
						<button type="button" class="mb-1 btn btn-pill btn-lg btn-info">Info</button>
						<button type="button" class="mb-1 btn btn-pill btn-lg btn-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-pill btn-lg btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Large Outline Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Large Pill Outline Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Large Pill Outline Square Buttons add class <code> .btn-lg </code> to <code> &lt;button class="btn btn-pill btn-outline-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-pill btn-lg btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Small Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Small Pill Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Small Pill Buttons add class <code> .btn-sm </code> to <code> &lt;button class="btn btn-pill btn-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-pill btn-sm btn-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-pill btn-sm btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-pill btn-sm btn-success">Success</button>
						<button type="button" class="mb-1 btn btn-pill btn-sm btn-info">Info</button>
						<button type="button" class="mb-1 btn btn-pill btn-sm btn-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-pill btn-sm btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Small Outline Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Small Pill Outline Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Small Pill Outline Buttons add class <code> .btn-sm </code> to <code> &lt;button class="btn btn-pill btn-outline-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-pill btn-sm btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Disable Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Disable Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Disable Pill Buttons add class <code> .disabled </code> to <code> &lt;button class="btn btn-pill btn-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-pill disabled btn-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-pill disabled btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-pill disabled btn-success">Success</button>
						<button type="button" class="mb-1 btn btn-pill disabled btn-info">Info</button>
						<button type="button" class="mb-1 btn btn-pill disabled btn-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-pill disabled btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Disable Outline Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Disable Outline Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Disable Outline Pill Buttons add class <code> .disabled </code> to <code> &lt;button class="btn btn-pill btn-outline-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-pill disabled btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-pill disabled btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-pill disabled btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn btn-pill disabled btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn btn-pill disabled btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-pill disabled btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Active Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Active Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Active Pill Buttons add class <code> .active </code> to <code> &lt;button class="btn btn-pill btn-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-pill active btn-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-pill active btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-pill active btn-success">Success</button>
						<button type="button" class="mb-1 btn btn-pill active btn-info">Info</button>
						<button type="button" class="mb-1 btn btn-pill active btn-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-pill active btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Active Outline Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Active Outline Buttons</h2>
					</div>
					<div class="card-body">
						<p class="mb-5"> For Active Outline Pill Buttons add class <code> .active </code> to <code> &lt;button class="btn btn-pill btn-outline-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-pill active  btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-pill active  btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-pill active  btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn btn-pill active  btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn btn-pill active  btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-pill active  btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>

			<!-- Block buttons -->
			<div class="col-lg-6">
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Block Pill Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Block Pill Buttons add class <code> .btn-block </code> to <code> &lt;button class="btn btn-pill btn-*"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-pill btn-block btn-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-pill btn-block  btn-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-pill btn-block btn-success">Success</button>
						<button type="button" class="mb-1 btn btn-pill btn-block btn-info">Info</button>
						<button type="button" class="mb-1 btn btn-pill btn-block btn-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-pill btn-block btn-danger">Danger</button>
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<!-- Block Outline Buttons -->
				<div class="card card-default">
					<div class="card-header card-header-border-bottom">
						<h2>Block Pill Outline Buttons</h2>
					</div>

					<div class="card-body">
						<p class="mb-5"> For Block Pill Outline Buttons add class <code> .btn-block </code> to <code> &lt;button class="btn btn-pillbtn-outline-primary"&gt; </code>
						</p>
						<button type="button" class="mb-1 btn btn-pill btn-block  btn-outline-primary">Primary</button>
						<button type="button" class="mb-1 btn btn-pill btn-block  btn-outline-secondary">Secondary</button>
						<button type="button" class="mb-1 btn btn-pill btn-block  btn-outline-success">Success</button>
						<button type="button" class="mb-1 btn btn-pill btn-block btn-outline-info">Info</button>
						<button type="button" class="mb-1 btn btn-pill btn-block  btn-outline-warning">Warning</button>
						<button type="button" class="mb-1 btn btn-pill btn-block  btn-outline-danger">Danger</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>




@@include('footer.htm', {

	"chart_js": "",
	"chartjs": "",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "",
	"date_range_picker": "",
	"date_range_js": "",

	"select2": "",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
